<template>
  <div class="infinite-container" >
    <mu-stepper :activeStep="activeStep" style="margin:1em 3em;">
        <mu-step>
          <mu-step-label>
            手机验证
          </mu-step-label>
        </mu-step>
        <mu-step>
          <mu-step-label>
            重置密码
          </mu-step-label>
        </mu-step>
      </mu-stepper>

     <div class="login" v-if="activeStep === 0">
      <mu-divider></mu-divider>
      <mu-row class="bgwhite content-pb4">
        <mu-col width="10" tablet="10" class="login-icon">
         <i class="iconfont icon-shouji"></i>
        </mu-col>
        <mu-col width="90" tablet="90">
         <mu-text-field hintText="请输入手机号" v-model="phoneNumber" type="number" fullWidth></mu-text-field>
          <i class="iconfont icon-X" v-show="phoneNumber.length > 0" @click="phoneNumber = ''"></i>
          <mu-divider></mu-divider>
        </mu-col>
      </mu-row>
      <mu-row class="bgwhite">
        <mu-col width="10"  tablet="10" class="login-icon">
          <i class="iconfont icon-message01"></i>
        </mu-col>
        <mu-col width="50" tablet="50">
           <mu-text-field hintText="验证码" v-model="vcode" type="text"  fullWidth></mu-text-field>
        </mu-col>
        <mu-col width="40" class="vcode-border" tablet="40">
          <mu-flat-button :label="vcodeLabel" @click="getVcode" class="vcode" :disabled="vcodeDisabled"></mu-flat-button>
        </mu-col>
        <mu-divider></mu-divider>
      </mu-row>
     
      <mu-divider></mu-divider>
      <div class="pd20">
        <mu-raised-button label="下一步" @click="nextStep" fullWidth primary class="btn-login"></mu-raised-button>
      </div>
     </div>

    <div class="login" v-else>
      <mu-divider></mu-divider>
       <mu-row class="bgwhite content-pb4">
        <mu-col width="10" tablet="10" class="login-icon">
         <i class="iconfont icon-suo"></i>
        </mu-col>
        <mu-col width="90" tablet="90">
          <mu-text-field hintText="新密码6-20位数字或字母" v-model="password" type="password"  fullWidth></mu-text-field>
          <mu-divider></mu-divider>
        </mu-col>
        <mu-col width="10" tablet="10" class="login-icon">
         <i class="iconfont icon-suo"></i>
        </mu-col>
        <mu-col width="90" tablet="90">
          <mu-text-field hintText="请确认新密码" v-model="confirmPassword" type="password"  fullWidth></mu-text-field>
        </mu-col>
      </mu-row>
      <mu-divider></mu-divider>
      <div class="pd20">
        <mu-raised-button label="提交" @click="login" fullWidth primary class="btn-login"></mu-raised-button>
      </div>
      </div>

  </div>
</template>
<script>
import {commonAjax, TENANT_ID, ROLE_ID, PLATFORM_PREFIX} from '../api/api'
import {testPhone, testPassword, testVcode} from '../common/js/util'
import md5 from 'md5'

const VCODE_LABEL_DEFALT = '获取验证码'

export default {
  data () {
    return {
      phoneNumber: localStorage.phoneNumber || '',
      vcode: '',
      password: '',
      confirmPassword: '',
      vcodeDisabled: false,
      vcodeLabel: VCODE_LABEL_DEFALT,
      activeStep: 0,
      isDoctor: this.$route.query.role === 'doctor'
    }
  },
  methods: {
    getVcode () {
      if (testPhone(this.phoneNumber)) {
        this.vcodeDisabled = true
        commonAjax([TENANT_ID, this.phoneNumber, ROLE_ID], `${PLATFORM_PREFIX}.smsService`, 'getIdentifyingCodeByRegister').then(res => {
          if (res.data.code === 200) {
            this.$store.commit('UPDATE_TOAST', {message: '验证码发送成功'})
            this.timeout()
          } else {
            this.vcodeDisabled = false
            this.$store.commit('UPDATE_TOAST', {message: res.data.msg})
          }
        })
      } else {
        this.$store.commit('UPDATE_TOAST', {message: '请输入有效的手机号'})
      }
    },
    timeout () {
      let start = 60
      let countDown = () => {
        this.vcodeTimer = setTimeout(() => {
          this.vcodeLabel = (start--) + 's'
          countDown()
          if (start <= 0) {
            this.vcodeDisabled = false
            this.vcodeLabel = VCODE_LABEL_DEFALT
            clearTimeout(this.vcodeTimer)
          }
        }, 1000)
      }
      countDown()
    },
    nextStep () {
      if (!testPhone(this.phoneNumber) || !testVcode(this.vcode)) {
        this.$store.commit('UPDATE_TOAST', {
          message: '手机号或验证码错误'
        })
        return
      }
      this.$store.commit('UPDATE_LOADING')
      commonAjax([
        TENANT_ID,
        this.phoneNumber,
        this.vcode
      ], `${PLATFORM_PREFIX}.smsService`, 'validateCode').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          this.activeStep = 1
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      })
    },
    login () {
      if (!testPassword(this.password)) {
        this.$store.commit('UPDATE_TOAST', {message: '请输入6-20位包含数字和字母密码'})
        return
      }
      if (this.password !== this.confirmPassword) {
        this.$store.commit('UPDATE_TOAST', {message: '两次输入的密码不一致'})
        return
      }
      localStorage.phoneNumber = this.phoneNumber
      this.$store.commit('UPDATE_LOADING')
      commonAjax([
        TENANT_ID,
        ROLE_ID,
        this.phoneNumber,
        md5(this.password)
      ], `${PLATFORM_PREFIX}.registerService`, 'findPassword').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200) {
          this.$store.commit('UPDATE_TOAST', {
            message: '重设密码成功,请登录',
            fn: () => this.$router.push(this.isDoctor ? '/login?role=doctor' : '/login')
          })
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      })
    }
  },
  mounted () {
    this.$store.commit('UPDATE_TITLE', '重置密码')
  },
  beforeDestroy () {
    this.$store.commit('UPDATE_TITLE')
  }
}
</script>

